<template>
    <div class="baseList">
        <div class="img">
            <img :src="item.lession_img" alt="">
            <span v-show="item.nab">{{item.nab}}</span>
        </div>
        <div class="infos">
            <div class="top">
                <h4 class="line_two">{{item.lession_name}}</h4>
                <p class="line_one">{{item.lession_desc}}</p>
            </div>
            <div class="bottom">
                <p class="classType">
                    <span  class="line_one">{{item.teacher_name}}</span>
                    <span>{{item.lession_level}}</span>
                </p>
                <div class="numbers">
                    <p class="huaban">
                        <span>{{item.lession_price}}</span><span>花瓣</span>
                    </p>
                    <p class="playnum">
                        <img src="../assets/class/play.png" alt="">
                        <span>{{item.lession_view}}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: {}
        }
    }
}
</script>

<style lang="scss" scoped>
.baseList {
    display: flex;
    justify-content: space-between;
    padding: 0 0 .05rem;
    .img {
        position: relative;
        img {
            display: block;
            width: 2.96rem;
            height: 2.11rem;
            object-fit: cover;
        }
        span {
            position: absolute;
            top: 0;
            left: 0;
            width: .52rem;
            line-height: normal;
            padding: .06rem 0;
            text-align: center;
            background-color: #e7470e;
            color: white;
            font-size: .18rem;
        }
    }
    .infos {
        margin-left: .2rem;
        overflow: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
            h4 {
                font-size: .28rem;
                color: #222;
                font-weight: bold;
                margin-bottom: .12rem;
                padding-top: .02rem;
                line-height: 1.4;
                overflow: hidden;
            }
            p {
                padding-top: .02rem;
                font-size: .2rem;
                color: #777;
                overflow: hidden;
            }
        }
        .bottom {
            font-size: .2rem;
            color: #777;
            .classType {
                display: flex;
                justify-content: space-between;
                span {
                    &:first-of-type {
                        flex: 1;
                        padding: .02rem 0;
                        overflow: hidden;
                    }
                    &:last-of-type {
                        padding-left: .04rem;
                    }
                }
            }
            .numbers {  
                margin-top: .1rem; 
                display: flex;
                justify-content: space-between;
                align-items: center;
                .huaban {
                    span:first-of-type {
                        font-size: .3rem;
                        color: #e7470e;
                        font-weight: bold;
                        margin-right: .06rem;
                        position: relative;
                        top: .02rem;
                    }
                }
                .playnum {
                    img {
                        width: .2rem;
                        height: .2rem;
                        position: relative;
                        top: .02rem;
                    }
                }
            }
        }
    }
}
</style>


